<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>Todo登录</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	<script type="text/javascript" src="./js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	
</head>
<body>
	<div class="container" id="app">
		<div class="col-md-offset-4 col-md-4">
			<div class="page-header">
				{{msg}}
			</div>
		</div>
		<div class="col-md-offset-4 col-md-4">
			
			<label for="name">请输入登录名：</label>
			<input id="name" type="text" v-model="user.username" placeholder="请输入登录名"></br></br>
					
			<label for="password">请输入登录密码：</label>
			<input id=password type="password" v-model="user.password" placeholder="请输入登录密码" v-on:mouseout="showPwdErr()">
				
			<span v-show="isshow" style="color: red">{{error}}</span>
			</br></br>
			<button type="submit" class="btn btn-default btn-info" v-on:click="login">登录</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="register.html" class="btn-default btn btn-info">注册</a>
			
		</div>
	</div>
</body>
</html>
<script type="text/javascript">

	var vue=new Vue({
		el:'#app',
		data:{
			msg:'TODO登录',
			user:{
				username:'',
				password:''
			},
			error:'',
			isshow:false
		},
		methods:{
			
			showPwdErr:function(){
				
			},
			login:function(){
				axios.post('/20180519SpringmvcTodo/user/userLogin.do',this.user).then(function (result){
					console.log(result);
					if(result.data.status=="1"){
			        	document.location.href="index.html";
			        }else{
			        	vue.error=result.data.msg;
			        	vue.isshow=true;
			        	vue.user.username='';
			        	vue.user.password='';
			        	alert(result.data.msg);
			        }
			    });
			}
		},
		mounted:function(){
			console.log('inited');
			this.isshow=false;
		}
	});


</script>